<template>
  <div class="user-feedback">
    <div class="feed-top">
      <span class="feed-title">我的反馈</span>
      <router-link to="/index/user/feedbackNew">
        <div class="feed-new">写反馈</div>
      </router-link>
    </div>
    <div class="feed-item" v-for="(item,i) in allFeed.list" :key="i">
      <p class="feed-time">{{item.createTime}}</p>
      <div class="feed-cont">{{item.content}}</div>
    </div>
    <el-pagination class="all-book-pagination" v-if="allFeed.total > 0"
      background
      :layout="'prev, '+(global.isPc?'pager,':'')+'next, jumper, ->, total, slot'"
      :total="allFeed.total"
      :page-count="allFeed.pages"
      :current-page.sync="pageParam.curr"
      :page-size.sync="pageParam.limit"
      @current-change="handlerPageChange">
      <span v-if="!global.isPc" class="el-pagination-slot">{{allFeed.pages}}页</span>
    </el-pagination>
  </div>
</template>

<script>
export default {
  data(){
    return {
      pageParam:{
        curr:1,
        limit:5
      },
      allFeed:{
        list:[],
        total:0
      }
    }
  },
  created(){
    this.listFeedBack();
  },
  methods:{
    listFeedBack(){
      this.$http.postFormInit('/user/listUserFeedBackByPage', this.pageParam, res => {
        this.allFeed.list = res.list;
        this.allFeed.total = parseInt(res.total);
        this.allFeed.pages = parseInt(res.pages);
      });
    },
    handlerPageChange(currentPage){
      this.pageParam.curr = currentPage;
      this.listFeedBack();
    }
  }
}
</script>

<style lang='scss' scoped>
.user-feedback {
  padding: 30px;
  .feed-top {
    height: 50px;
    .feed-title {
      font-size: 20px;
      height: 40px;
    }
    .feed-new {
      color: #ffffff;
      float: right;
      width: 120px;
      line-height: 40px;
      background-color: $base-color;
      border-radius: 20px;
      text-align: center;
    }
    .feed-new:hover{
      background-color: #f70;
    }
  }
  .feed-item {
    margin-top: 10px;
    border: 1px solid #eee;
    border-width: 1px 0 0 0;
    .feed-time {
      margin-top: 20px;
      font-size: 13px;
      color: #333333;
    }
    .feed-cont {
      word-wrap: break-word;
      font-size: 13px;
      margin-bottom: 20px;
      color: #333;
    }
  }
  .all-book-pagination {
    margin: 20px 0;
  }
}
</style>